
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
        }

        header {
            border-bottom: 4px solid #007bff;
        }

        .btn-toggle {
            display: inline-flex;
            align-items: center;
            padding: .5rem 1rem;
            font-weight: 600;
            color: #007bff;
            background-color: transparent;
            border: 0;
            transition: background-color 0.2s;
        }

        .btn-toggle:hover {
            background-color: rgba(0, 123, 255, 0.1);
        }

        .btn-toggle::before {
            width: 1.25em;
            line-height: 0;
            content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
            transition: transform .35s ease;
            transform-origin: .5em 50%;
        }

        .btn-toggle[aria-expanded="true"]::before {
            transform: rotate(90deg);
        }

        .nav-link {
            padding: 10px 20px;
        }

        .card {
            margin: 20px 0;
        }

        .smaller-btn {
        font-size: 0.9rem; /* 减小按钮字体大小 */
    }
    .smaller-menu a {
        font-size: 0.85rem; /* 减小下拉菜单字体大小 */
        padding: 3px 20px; /* 减小下拉菜单项的内边距 */
    }
    
    </style>
</head>

<body>

    <header class="bg-primary text-white p-4">
        <div class="container">
            <h1>课程管理系统</h1>
            <p>欢迎使用我们的课程管理系统！</p>
        </div>
    </header>

    <div class="container-fluid">
        <div class="row">

            <div class="col-md-2">
                <ul class="list-unstyled nav nav-pills flex-column mb-auto">

                    <li class="mb-1">
                        <button class="btn btn-toggle align-items-center rounded collapsed smaller-btn" data-bs-toggle="collapse"
                            data-bs-target="#major-collapse" aria-expanded="false">
                            专业管理
                        </button>
                        <div class="collapse show" id="major-collapse">
                            <ul class="btn-toggle-nav smaller-menu">
                                <li><a class="nav-link" href="{{url_for('list_majors')}}">查看专业</a></li>
                                <li><a class="nav-link" href="{{url_for('add_major')}}">添加专业</a></li>
                            </ul>
                        </div>
                    </li>

                    <li class="mb-1">
                        <button class="btn btn-toggle align-items-center rounded collapsed smaller-btn" data-bs-toggle="collapse"
                            data-bs-target="#teacher-collapse" aria-expanded="false">
                            教师管理
                        </button>
                        <div class="collapse show" id="teacher-collapse">
                            <ul class="btn-toggle-nav smaller-menu">
                                <li><a class="nav-link" href="{{url_for('list_teachers')}}">查看教师</a></li>
                                <li><a class="nav-link" href="{{url_for('add_teacher')}}">添加教师</a></li>
                            </ul>
                        </div>
                    </li>

                    <li class="mb-1">
                        <button class="btn btn-toggle align-items-center rounded collapsed smaller-btn" data-bs-toggle="collapse"
                            data-bs-target="#student-collapse" aria-expanded="false">
                            学生管理
                        </button>
                        <div class="collapse show" id="student-collapse">
                            <ul class="btn-toggle-nav smaller-menu">
                                <li><a class="nav-link" href="{{ url_for('list_students') }}">查看学生</a></li>
                                <li><a class="nav-link" href="{{ url_for('add_student') }}">添加学生</a></li>
                            </ul>
                        </div>
                    </li>

                    <li class="mb-1">
                        <button class="btn btn-toggle align-items-center rounded collapsed smaller-btn" data-bs-toggle="collapse"
                            data-bs-target="#course-collapse" aria-expanded="false">
                            课程管理
                        </button>
                        <div class="collapse show" id="course-collapse">
                            <ul class="btn-toggle-nav smaller-menu">
                                <li><a class="nav-link" href="{{ url_for('list_courses') }}">查看课程</a></li>
                                <li><a class="nav-link" href="{{ url_for('add_course') }}">添加课程</a></li>
                            </ul>
                        </div>
                    </li>

                    <li class="mb-1">
                        <button class="btn btn-toggle align-items-center rounded collapsed smaller-btn" data-bs-toggle="collapse"
                            data-bs-target="#user-collapse" aria-expanded="false">
                            用户管理
                        </button>
                        <div class="collapse show" id="user-collapse">
                            <ul class="btn-toggle-nav smaller-menu">
                                {% if 'uid' in session %}
                                <li><a class="nav-link" href="{{ url_for('logout') }}">退出登录</a></li>
                                {% if session['is_admin'] %}
                                <li><a class="nav-link" href="{{ url_for('register') }}">注册用户</a></li>
                                {% endif %}
                                {% endif %}
                                <!-- <li><a class="nav-link" href="{{ url_for('list_students') }}">学生注册</a></li> -->
                                <!-- <li><a class="nav-link" href="{{ url_for('add_student') }}">教师注册</a></li> -->
                            </ul>
                        </div>
                    </li>

                </ul>
            </div>

            <div class="col-md-10">
                <div class="card">
                    <div class="card-body">
                        {% block content %}{% endblock %}
                    </div>
                </div>
            </div><!--end of col-md-10 -->
        </div><!--end of row -->
    </div><!--end of container-fluid-->

</body>

</html>



